<template>
  <div class="detail-box">
    <div class="detail-title">
      <h2>{{ content.title }}</h2>
      <div class="icons">
        <span>
          <i class="iconfont icon-pinglun"></i>
          {{ content.createTime | timestampToTime }}
        </span>
        <span><i class="iconfont icon-eye"></i>329次浏览</span>
        <span><i class="iconfont icon-gangbi"></i>{{ content.length }}字数</span>
      </div>
    </div>
    <div class="detail-img" v-if="content.imgUrl">
      <img :src="content.imgUrl" alt="" />
    </div>
    <div
      class="detail-content"
      v-html="content.content"
      v-lazy-container="{
        selector: 'img'
      }"
      @click="handleImgClick($event)"
    ></div>
  </div>
</template>

<script>
import api from '../../../api/blog'
import helper from '../../../utils/helper'
export default {
  data() {
    return {
      content: {}
    }
  },
  methods: {
    // 文章详情
    async getPostDetail() {
      const id = this.$route.params.id
      try {
        const res = await api.getPostDetail({ id })
        if (res.code === 200) {
          this.content = res.data[0]
          this.content.content = helper.md.render(this.content.content)
          this.content.content = this.content.content.replace(/src/g, 'data-src')
          this.content.length = this.content.content.length
        }
      } catch (err) {
        console.log(err)
      }
    },

    // 文章图片点击
    handleImgClick(e) {
      if (e.target.nodeName === 'IMG') {
        this.$ImgPreview.show({
          imgSrc: e.target.currentSrc,
          description: e.target.alt
        })
      }
    }
  },
  mounted() {
    this.getPostDetail()
  }
}
</script>
